import { createHistory, history } from '@umijs/max';
import { Button, Checkbox, Form, Input, Space, message } from 'antd';
import img from '../../assets/WechatIMG26.jpeg'
import { postLogin } from '../Register/service';
import { useEffect } from 'react';


const Login = () => {

  useEffect(() => {
    if(window.localStorage.getItem('info') && window.localStorage.getItem('token')){
      history.push('/')
    }
  })

  const onFinish = async (values: any) => {
    const result = await postLogin({username:values.username,password:values.password})
    if(result.state === 200){
      window.localStorage.setItem('token',result.data?.uid)
      window.localStorage.setItem('info',JSON.stringify(result.data))
      message.success('登录成功')
      history.push('/home')
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div
      style={{
        width: '100%',
        height: '100vh',
        background:
          'url(https://ts4.cn.mm.bing.net/th?id=OIP-C.8GEB1Qtd_1uPdTA7aJbbygHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2)',
          // `url(${img}`
      }}
    >
      <div
        style={{
          paddingTop: '50px',
          width: '600px',
          height: '300px',
          background: 'white',
          position: 'absolute',
          left: '50%',
          top: '50%',
          marginLeft: '-300px',
          marginTop: '-150px',
          borderRadius: '9px',
        }}
      >
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder='请输入用户名'/>
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder='请输入密码'/>
          </Form.Item>

          <Space style={{paddingLeft:'200px'}}>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" onClick={() => {
                history.push('register')
              }}>
                先去注册
              </Button>
            </Form.Item>
          </Space>
        </Form>
      </div>
    </div>
  );
};

export default Login;
